import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-demo-grid-basic',
  templateUrl: './basic.component.html',
  styles: [
    `
      .grid-demo {
        background-image: linear-gradient(
          90deg,
          #f2f2f2 4.16666667%,
          transparent 4.16666667%,
          transparent 8.33333333%,
          #f2f2f2 8.33333333%,
          #f2f2f2 12.5%,
          transparent 12.5%,
          transparent 16.66666667%,
          #f2f2f2 16.66666667%,
          #f2f2f2 20.83333333%,
          transparent 20.83333333%,
          transparent 25%,
          #f2f2f2 25%,
          #f2f2f2 29.16666667%,
          transparent 29.16666667%,
          transparent 33.33333333%,
          #f2f2f2 33.33333333%,
          #f2f2f2 37.5%,
          transparent 37.5%,
          transparent 41.66666667%,
          #f2f2f2 41.66666667%,
          #f2f2f2 45.83333333%,
          transparent 45.83333333%,
          transparent 50%,
          #f2f2f2 50%,
          #f2f2f2 54.16666667%,
          transparent 54.16666667%,
          transparent 58.33333333%,
          #f2f2f2 58.33333333%,
          #f2f2f2 62.5%,
          transparent 62.5%,
          transparent 66.66666667%,
          #f2f2f2 66.66666667%,
          #f2f2f2 70.83333333%,
          transparent 70.83333333%,
          transparent 75%,
          #f2f2f2 75%,
          #f2f2f2 79.16666667%,
          transparent 79.16666667%,
          transparent 83.33333333%,
          #f2f2f2 83.33333333%,
          #f2f2f2 87.5%,
          transparent 87.5%,
          transparent 91.66666667%,
          #f2f2f2 91.66666667%,
          #f2f2f2 95.83333333%,
          transparent 95.83333333%
        );
      }
      .grid-demo > div {
        margin-bottom: 16px;
      }
      .grid-demo > div:last-child {
        margin-bottom: 0;
      }
      .grid-demo > div > div .ui-col-box {
        height: 40px;
        line-height: 40px;
        color: #fff;
        text-align: center;
        background-color: #2673e5;
      }
      .grid-demo > div > div:nth-child(2n) .ui-col-box {
        background-color: #1359bf;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BasicComponent {}
